<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对话记录</title>
</head>
<body>

<th:block th:fragment="conversation-detail">
    <!-- 头部标题 -->
    <div class="drawer-header">
        <div class="record-title">{{ currentSession ?.agentName || '会话详情' }}</div>
        <div class="record-total">一共 {{ detailPagination ?.total || 0 }} 条</div>
        <div class="record-nav">
            <el-button size="mini" @click="goFirst(currentSession.sessionId)">查看第一条</el-button>
            <el-button size="mini" @click="goPrev(currentSession.sessionId)">上一条</el-button>
            <el-button size="mini" @click="goNext(currentSession.sessionId)">下一条</el-button>
            <el-button size="mini" @click="goLast(currentSession.sessionId)">查看最后一条</el-button>
        </div>
    </div>

    <!-- 消息区域 -->
    <div class="chat-messages">
        <div class="chat-center flex-1 overflow-y-auto p-4" ref="messageList">
            <!-- 消息列表 -->
            <div v-for="(item, index) in currentMessages" :data-id="item.id" class="message-container"
                 :class="item.role+'-message-container'">
                <div class="avatar">
                    <img v-if="item.role=='assistant'" src="/svg/robot.svg">
                    <img v-if="item.role=='user'" src="/svg/user.svg">
                </div>
                <div class="message" :class="item.id ? 'analyze-msg' : ''">
                    <div style="font-size: 12px;">{{item.createTime}}</div>
                    <div class="message-content">
                        <div v-html="item.content" class="html-content"></div>
                        <el-image v-if="item.images" :src="item.images" :preview-src-list="[item.images]"
                                  class="max-w-full rounded-md"
                                  alt="加载的图片"
                        ></el-image>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="/css/conversation.css">

</th:block>

</body>
</html>